<!--
 * @Description: 
 * @Author: HYH
 * @LastEditors: HYH
 * @LastEditTime: 2023-06-12 09:58:02
-->
<template>
  <div class="flex min-h-full flex-col justify-center px-6 -mt-10">
    <div class="mt-5 sm:mx-auto sm:w-full sm:max-w-md">
      <form
        class="space-y-6 bg-white rounded-lg p-6"
        onsubmit="return false"
        id="resetForm"
        @submit="reset"
        method="POST"
      >
        <div>
          <label for="email" class="block text-sm font-medium leading-6 text-gray-900">
            Email
          </label>
          <div class="mt-2">
            <input
              id="email"
              name="email"
              type="email"
              class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            />
          </div>
        </div>
        <div>
          <label for="email" class="block text-sm font-medium leading-6 text-gray-900">
            验证码
          </label>
          <div class="mt-2">
            <div class="flex">
              <input
                id="code"
                name="code"
                class="indent-3 flex-1 block rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
              />
              <button class="btn rounded-none" @click="sendEmailCode" :disabled="state.btnDisabled">
                {{ state.btnName }}
              </button>
            </div>
          </div>
        </div>
        <div>
          <div class="flex items-center justify-between">
            <label for="password" class="block text-sm font-medium leading-6 text-gray-900">
              密码
            </label>
          </div>
          <div class="mt-2">
            <input
              id="password"
              name="password"
              type="password"
              class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            />
          </div>
        </div>

        <div>
          <button
            type="submit"
            class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
          >
            重 置
          </button>
        </div>
      </form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { http } from '@/http'
import { UserModel } from '@/modal/user'
import { rootUserStore } from '@/store/user'
import { message as Message } from 'antd'
import joi from 'joi'
const store = rootUserStore()
const router = useRouter()
let timer: any

const state = reactive({
  btnName: '发送验证码',
  btnDisabled: false,
  leftTime: 60
})

const sendEmailCode = (e: Event) => {
  e.preventDefault()
  const form = document.querySelector('#resetForm') as any
  const formData = new FormData(form)
  const email = formData.get('email')
  const code = formData.get('code')
  const schema = joi.object({
    email: joi
      .string()
      .email({ tlds: { allow: false } })
      .required()
  })
  const { error, value } = schema.validate({ email })
  if (error) return Message.warning(error.message)
  state.btnName = '发送中...'
  state.btnDisabled = true
  http.post<UserModel>('/api/resetPwd/sendEmailCode', { email: value.email }).then(res => {
    const { code, message } = res
    if (code === 200) {
      Message.success(message)
      codeTimer()
    } else {
      state.btnName = '发送验证码'
      state.btnDisabled = false
    }
  })
}

function codeTimer() {
  state.btnName = '获取验证码'
  if (state.leftTime >= 1) {
    state.btnDisabled = true
    state.btnName = state.leftTime + 's 后获取'
    state.leftTime -= 1
    setTimeout(function () {
      codeTimer()
    }, 1000)
  } else {
    state.btnName = '发送验证码'
    state.btnDisabled = false
    state.leftTime = 60
  }
}

const reset = () => {
  const form = document.querySelector('#resetForm') as any
  const formData = new FormData(form)
  const email = formData.get('email')
  const password = formData.get('password')
  const code = formData.get('code')
  const schema = joi.object({
    email: joi
      .string()
      .email({ tlds: { allow: false } })
      .required(),
    code: joi.string().required(),
    password: joi.string().required()
  })
  const { error } = schema.validate({ email, password, code })
  if (error) return Message.warning(error.message)
  const data = { email, password, code }
  http.post<UserModel>('/api/resetPwd', data).then(res => {
    const { code } = res
    if (code === 200) {
      window.location.href = '#login'
    }
  })
}
</script>

<style lang="scss" scoped></style>
